<template>
  <div>
    <div class="bar_graph"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.$nextTick(() => {
      this.barGraph();
    });
  },
  methods: {
    barGraph() {
      var chartDom = document.querySelector(".bar_graph");
      var myChart = echarts.init(chartDom);
      // 用于清除定时器
      let tootipTimer = null;
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(0,0,0,0.2)",
            },
          },
          formatter: function (params) {
            var tar = params[1];
            return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false,
          },
          color: "#333",
          axisLabel: {
            interval: 0,
            rotate: 30,
            color: "#333",
            fontSize: 14,
          },
          data: [
            "7楼面积",
            "大岛责任有限公司",
            "大岛责任有限公司",
            "大岛责任有限公司",
            "大岛责任有限公司",
            "大岛责任有限公司",
            "空置面积",
          ],
        },
        yAxis: {
          type: "value",
          max: function (value) {
            return value.max;
          },
          axisLabel: {
            color: "#C1BEBE",
            fontSize: 14,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#6E7079",
            },
          },
        },
        series: [
          {
            name: "Placeholder",
            type: "bar",
            stack: "Total",
            itemStyle: {
              borderColor: "transparent",
              color: "transparent",
            },
            emphasis: {
              itemStyle: {
                borderColor: "transparent",
                color: "transparent",
              },
            },
            data: [0, 1700, 1400, 1200, 700, 500, 0],
          },
          {
            name: "租赁面积",
            type: "bar",
            stack: "Total",
            label: {
              show: true,
              position: "inside",
            },
            itemStyle: {
              normal: {
                color: "#546FC6",
              },
              emphasis: {
                color: "rgba(50,226,248)",
              },
            },
            data: [
              2900,
              1200,
              300,
              200,
              500,
              200,
              {
                value: 500,
                itemStyle: {
                  color: "#a90000",
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
      // 自动高亮动画

      // 可调用clearLoop方法，清除定时器
      tootipTimer && tootipTimer.clearLoop();
      tootipTimer = null;
      // 调用轮播的方法
      tootipTimer = tools.loopShowTooltip(myChart, option, {
        interval: 1500, // 轮播间隔时间
        loopSeries: true, // 是否开启轮播循环
      });
    },

  },
};
</script>

<style scoped>

.bar_graph {
  width: 100%;
  height: 300px;
}
</style>